<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金安区人社综窗退休年龄计算器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin-bottom: 20px;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 24px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 8px;
            color: #2c3e50;
        }
        
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .inline-inputs {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .inline-inputs input {
            flex: 1;
        }
        
        .hint {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        .result {
            display: none;
            background: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 20px;
            margin-top: 20px;
            border-radius: 4px;
        }
        
        .result h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .result-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .result-table td {
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        
        .result-table td:first-child {
            font-weight: bold;
            width: 40%;
            color: #555;
        }
        
        .error {
            color: #e74c3c;
            background: #ffeaea;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
            display: none;
        }
        
        .loading {
            text-align: center;
            color: #666;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>退休年龄计算器</h1>
        
        <form id="calcForm">
            <div class="form-group">
                <label for="person_type">1. 人员类别</label>
                <select id="person_type" name="person_type" required>
                    <option value="1">男职工（最低60岁）</option>
                    <option value="2">55岁退休女职工（最低55岁）</option>
                    <option value="3">50岁退休女职工（最低50岁）</option>
                </select>
            </div>

            <div class="form-group">
                <label for="birth_ym">2. 出生年月</label>
                <input type="text" id="birth_ym" name="birth_ym" placeholder="格式：YYYY-MM（例：1980-05）" required>
                <div class="hint">格式：YYYY-MM（例：1980-05）</div>
            </div>

            <div class="form-group">
                <label>3. 当前缴费时长</label>
                <div class="inline-inputs">
                    <input type="number" id="current_pay_year" name="current_pay_year" placeholder="年" min="0" required>
                    <span>年</span>
                    <input type="number" id="current_pay_month" name="current_pay_month" placeholder="月" min="0" max="11" required>
                    <span>月</span>
                </div>
                <div class="hint">月数范围：0-11</div>
            </div>

            <div class="form-group">
                <label for="continue_ym">4. 继续缴费年月</label>
                <input type="text" id="continue_ym" name="continue_ym" placeholder="格式：YYYY-MM" required>
                <div class="hint">自动填充当前年月，可修改（包含当月）</div>
            </div>

            <button type="button" onclick="calculate()">开始计算</button>
        </form>

        <div class="loading" id="loading">计算中...</div>
        
        <div class="error" id="error"></div>
        
        <div class="result" id="result">
            <h3>计算结果</h3>
            <table class="result-table">
                <tr><td>法定退休年月：</td><td id="legal_retire_ym">-</td></tr>
                <tr><td>弹性提前退休年月：</td><td id="early_retire_ym">-</td></tr>
                <tr><td>最早可退休年月：</td><td id="earliest_retire_ym">-</td></tr>
                <tr><td>对应最低缴费年限：</td><td id="min_pay_formatted">-</td></tr>
                <tr><td>已缴费年限：</td><td id="current_pay_formatted">-</td></tr>
                <tr><td>还需继续缴费时长：</td><td id="need_pay_ym">-</td></tr>
            </table>
        </div>
    </div>

    <script>
        // 自动设置继续缴费年月为当前年月
        document.addEventListener('DOMContentLoaded', function() {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            document.getElementById('continue_ym').value = `${year}-${month}`;
        });

        // 计算函数
        async function calculate() {
            // 重置显示
            document.getElementById('error').style.display = 'none';
            document.getElementById('result').style.display = 'none';
            document.getElementById('loading').style.display = 'block';
            
            // 收集表单数据
            const formData = {
                person_type: parseInt(document.getElementById('person_type').value),
                birth_ym: document.getElementById('birth_ym').value,
                current_pay_year: parseInt(document.getElementById('current_pay_year').value) || 0,
                current_pay_month: parseInt(document.getElementById('current_pay_month').value) || 0,
                continue_ym: document.getElementById('continue_ym').value
            };
            
            try {
                // 替换为您的云函数URL
                const apiUrl = 'https://1386150166-fsk1q7qpmn.ap-guangzhou.tencentscf.com/calculate';
                
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });
                
                const data = await response.json();
                
                document.getElementById('loading').style.display = 'none';
                
                if (data.success) {
                    // 显示结果
                    document.getElementById('legal_retire_ym').textContent = data.data.legal_retire_ym;
                    document.getElementById('early_retire_ym').textContent = data.data.early_retire_ym;
                    document.getElementById('earliest_retire_ym').textContent = data.data.earliest_retire_ym;
                    document.getElementById('min_pay_formatted').textContent = data.data.min_pay_formatted;
                    document.getElementById('current_pay_formatted').textContent = data.data.current_pay_formatted;
                    document.getElementById('need_pay_ym').textContent = data.data.need_pay_ym;
                    
                    document.getElementById('result').style.display = 'block';
                } else {
                    // 显示错误
                    document.getElementById('error').textContent = '错误：' + data.error;
                    document.getElementById('error').style.display = 'block';
                }
            } catch (error) {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('error').textContent = '网络错误：' + error.message;
                document.getElementById('error').style.display = 'block';
            }
        }
        
        // 支持按回车键提交
        document.getElementById('calcForm').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                calculate();
            }
        });
    </script>
</body>
</html>